import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Users } from '../api/users/users.js';

import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';
import DatePicker from 'material-ui/DatePicker'; 
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import IconButton from 'material-ui/IconButton';
import NavigationLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left';

import Tab1List from './Tab1List.jsx';
let QRCode = require('qrcode.react');

const optionsStyle = {
  maxWidth: 255,
  marginRight: 'auto',
};
// Task component - represents a single todo item
export class Tab2Detail extends Component {
  constructor(props) {
    super(props);

    this.state = {
      expanded: false,
      openHistory: false,
      openHistoryAll: false,
      openAccount: false,
    };
  }

  handleExpandChange(expanded){
    this.setState({expanded: expanded});
  };

  handleToggle(event, toggle){
    this.setState({expanded: toggle});
  };

  handleExpand() {
    this.setState({expanded: true});
  };

  handleReduce(){
    this.setState({expanded: false});
  };

componentDidMount(x,y,z){
  this.setState({cw:window.innerWidth,ch:window.innerHeight});
}  

handleClose(){
  this.setState({openHistory:false});
}
handleCloseAll(){
  this.setState({openHistoryAll:false});
}

handleCloseAccount(){
  this.setState({openAccount:false});
}

renderAppBar(){
  if(this.props.handleClose){
    return (
      <AppBar title="账号详细" 
        iconElementLeft={
            <IconButton 
            onTouchTap={this.props.handleClose}
            iconStyle={{width:48,height:48}}
            style={{padding: 0,}}
            ><NavigationLeft /></IconButton>}
      />
    );
  }else
    return '';
}
renderCreateBy(){
  //console.log('renderCreateBy:'+this.state.createdBy);
  if(this.state.createdBy)
    return (
    <Tab2Detail
      openItem={this.state.createdBy}
      handleClose={this.handleCloseAccount.bind(this)}
    />
    );
  else return '';
}
render() {
    let item = this.props.openItem||{};
    let qc_url = location.host+'/tab2/'+this.props.uid;
    //console.log('qc_url:'+qc_url);
    let mybtn1,mybtn2;
    if(item.utype == "用户"){
      mybtn1 = <RaisedButton label="向它发起交易" primary={true} fullWidth={true} style={{padding:15}}
            onTouchTap={e => this.setState({openHistory:true})} />;
      mybtn2 =  <RaisedButton label="它的交易历史" primary={true} fullWidth={true} style={{padding:15}}
      onTouchTap={e => this.setState({openHistoryAll:true})} />;
    }
    
    return (
     <div> 
     {this.renderAppBar()}
      <Card expanded={this.state.expanded} 
      containerStyle={{marginLeft:'5%',marginRight:'5%'}}
      onExpandChange={this.handleExpandChange.bind(this)}>
        <CardHeader
          title={item.title}
          subtitle={item.desc}
          avatar={item.avatar}
          actAsExpander={true}
          showExpandableButton={true}
          
        />
      <TextField
        floatingLabelText='创建日期'
        floatingLabelFixed={true}
        value={item.createdAt?item.createdAt.toLocaleString():''}
      />
      <TextField
        floatingLabelText='账号描述'
        floatingLabelFixed={true}
        value={item.desc+''}
      />
  

    {mybtn1}
    {mybtn2}

    <div style={{margin:'0 auto',width:128}}>
      <QRCode value={qc_url} />
    </div>
        <CardMedia
          expandable={true}
          overlay={<CardTitle title="账户交易一览" subtitle="点击图中交易连线或账户可看详情" />}
        >
          <img src="images/chord.png" />
        </CardMedia>
      </Card>

    <Drawer width={this.state.openHistory?this.state.cw:0} 
      containerStyle={{position:'fixed',top:0,overflowY:'hidden'}} 
      openSecondary={true} open={this.state.openHistory} >
          <Tab1List
            tuid={item.userId}
            cuid={Session.get("currentUser").userId}
            handleClose={this.handleClose.bind(this)}
          />
     </Drawer>      
    <Drawer width={this.state.openHistoryAll?this.state.cw:0} 
      containerStyle={{position:'fixed',top:0,overflowY:'hidden'}} 
      openSecondary={true} open={this.state.openHistoryAll} >
          <Tab1List
            cuid={item.userId}
            tuid={null}
            handleClose={this.handleCloseAll.bind(this)}
          />
     </Drawer>      
    <Drawer width={this.state.openAccount?this.state.cw:0} 
      containerStyle={{position:'fixed',top:0,overflowY:'hidden'}} 
      openSecondary={true} open={this.state.openAccount} >
      {this.renderCreateBy()}
     </Drawer>      
      
    </div>
    );
  }
}

export default createContainer((props) => {
  //可以传递uid,也可以准备好数据之后直接传递openItem
  if(!props.uid)
    return {openItem:props.openItem||{}};
  //console.log('uid:'+props.uid);
  Meteor.subscribe('users_fp');
  return {
    openItem: Users.findOne({userId:props.uid}, {}),
   };
}, Tab2Detail);
